<template>
	<div v-if="pageflag" class="right_top_wrap beautify-scroll-def" :class="{ 'overflow-y-hidden': !sbtxSwiperFlag }">
		<component :is="components" :data="list" :class-option="defaultOption">
			<ul class="right_top">
				<li class="right_top_item" v-for="(item, i) in list" :key="i">
					<span class="order_num scrolling">{{ i + 1 }}</span>
					<div class="inner_right">
						<!-- 分隔线 -->
						<div class="separator_line"></div>
						<!-- 第一行 -->
						<div class="flex">
							<div class="info">
								<span class="label">姓名：</span>
								<span class="scrolling emphasis_red">
									{{ item.name }}</span>
							</div>
							<div class="info">
								<span class="label">性别：</span>
								<span class="scrolling" :class="{
									sex_content_male: item.sex == 0,
									sex_content_female: item.sex == 1,
								}">
									{{ item.sex == 0 ? "男" : "女" }}
								</span>
							</div>

						</div>

						<span class="education_content scrolling" :class="{
							education_content_ben: item.education == 0,
							education_content_shuo: item.education == 1,
							education_content_bo: item.education == 2,
						}">
							{{ item.education == 0 ? "本科生" : (item.education == 1 ? "硕士生" : "博士生") }}
						</span>

						<!-- 第二行 -->
						<div class="info province_cell" style="margin-right: 0;">
							<span class="label">生源地：</span>
							<span class="minor">
								{{ addressHandle(item) }}</span>
						</div>

						<div class="info" style="margin-right: 0;">
							<span class="label">生日：</span>
							<span class="minor">
								{{ item.birthday }}</span>
						</div>
					</div>
				</li>
			</ul>
		</component>
	</div>

	<Reacquire v-else @onclick="getData" style="line-height: 200px" />
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Blank from "../../components/blank.vue";
import { regionCodes, getNameByRegionCode } from "../../utils/map/regionCodes";
export default {
	components: { vueSeamlessScroll, Blank },
	data() {
		return {
			list: [],
			pageflag: true,
			components: vueSeamlessScroll,
			defaultOption: {
				...this.$store.state.setting.defaultOption,
				singleHeight: 240,
				limitMoveNum: 5,
				step: 0,
			},
		};
	},
	computed: {
		sbtxSwiperFlag() {
			let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
			if (sbtxSwiper) {
				this.components = vueSeamlessScroll;
			} else {
				this.components = Blank;
			}
			return sbtxSwiper;
		},
	},
	created() {

	},

	mounted() {
		this.getData();
	},
	methods: {
		addressHandle(item) {
			let code = item.province.toString();
			return getNameByRegionCode(code);
		},

		getData() {
			this.pageflag = true;
			// this.pageflag =false
			this.$axios.get(`/api/result/update_list`).then((res) => {
				console.log("最新报道数据", res);
				if (res.code == 0) {
					this.list = res.data.list;
					let timer = setTimeout(() => {
						clearTimeout(timer);
						this.defaultOption.step =
							this.$store.state.setting.defaultOption.step;
					}, this.$store.state.setting.defaultOption.waitTime);
				} else {
					this.pageflag = false;
					this.$Message.warning(res.message);
				}
			});
		},
	},
};
</script>
<style lang='scss' scoped>
span {
	font-family: "Microsoft YaHei";
	font-size: 16px;
	line-height: 24px;
}

.right_top_wrap {
	overflow: hidden;
	width: 100%;
	height: 95%;
}

.scrolling {
	//  vertical-align:middle;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.overflow-y-hidden {
	overflow-y: hidden;
}

.right_top {
	width: 100%;
	height: 100%;

	.right_top_item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px;
		font-size: 16px;

		.order_num {
			margin: 0 16px 0 -20px;
			display: none
		}

		.info {
			margin-right: 36px;
			display: flex;
			align-items: center;
			color: #005b30;

			.label {
				flex-shrink: 0;
				color: #233a18;
			}

			.minor {
				color: #005b30;
			}
		}

		.inner_right {
			position: relative;
			height: 100%;
			width: 380px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.separator_line {
				position: absolute;
				height: 2px;
				width: 104%;
				background-image: url("../../assets/img/dashed_line.png");
				bottom: -12px; // 与.right_top_item的padding一致
				left: -2%;
				background-size: cover;
			}

			.province_cell {
				width: 200px;
				display: flex;
			}
		}

		.emphasis_red {
			color: #a61603;
			font-weight: 600;
			width: 50px;
			flex-shrink: 0;
		}

		.sex_content_male {
			color: #0d8fd2;
		}

		.sex_content_female {
			color: #d20d2c;
		}

		.education_content {
			width: 64px;
			border-radius: 4px;
			border-width: 1px;
			border-style: solid;
			flex-shrink: 0;

			text-align: center;
		}

		.education_content_ben {
			color: #0ba85f;
			border-color: #0ba85f;
			background-color: #0ba85f10;
		}

		.education_content_shuo {
			color: #d05e2f;
			border-color: #d05e2f;
			background-color: #d05e2f10;
		}

		.education_content_bo {
			color: #477f58;
			border-color: #477f58;
			background-color: #477f5810;
		}
	}
}
</style>